import React from 'react';

class State extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      count: 0
    }
  }

  render() {
    return  <p>
      {this.state.count}
      <br/>
      <button onClick={ this.increaseCount}> 累加</button>
    </p>;
  }

  increaseCount = () => {
    // 只会合并更新一次 类似 object.assign
    let { count } = this.state;
    this.setState({count: count +1},() => {console.log('stateCount1:', this.state.count)})
    this.setState({count: count +1},() => {console.log('stateCount2:', this.state.count)})
    this.setState({count: count +1}, () => {console.log('stateCount3:', this.state.count)})
    this.setState({count: count +1}, () => {console.log('stateCount4:', this.state.count)})

    // 传入函数时 不会合并 因为函数是一个表达式 无法合并
    // this.setState((preState, props) => {
    //   return { count: preState.count + 1}
    // })
    // this.setState((preState, props) => {
    //   return { count: preState.count + 1}
    // })
    // this.setState((preState, props) => {
    //   return { count: preState.count + 1}
    // })
    
    // 同步setState

    // setTimeout(() => {
    //   this.setState({
    //       count: count +1
    //   })
    //   console.log('setTimeoutCount:',this.state.count);
    // }, 5000);
    
  }
}

export default State